<template>
	<view class="zone">
		<Header title="炼丹记录"></Header>

		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>

			<view class="box">
				<view class="skk">
					<view class="skk1">
						丹药/名称
					</view>
					<view class="skk1">
						丹药数量
					</view>
					<view class="skk1">
						炼制时间
					</view>
				</view>
				<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item , index) in listdata" :key="index">

						<view class="ibxoa">
							<image class="yimg" :src="item.props.img" mode="widthFix"></image>
							<text>{{item.props.name}}</text>
						</view>
						<text class="dannum">{{item.number}}</text>
						<view class="word">
							<p class="remark">{{item.create_time }}</p>
						</view>
					</view>

					<view class="empty" v-if="listdata.length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						<text class="hui">
							没有数据哦~
						</text>
					</view>
					<u-loadmore v-else :status="status" color="#666" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listdata: [],
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			}
		},
		onShow() {

		},
		onLoad() {
			this.moneyDetailList();
		},
		methods: {
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page = ++this.page;
				this.moneyDetailList();
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},
			// 炼丹记录
			async moneyDetailList() {
				let res = await this.$http.index.liandanLogs({
					page: this.page
				})
				if (res.code == 1) {
					this.max_page = res.data.last_page
					this.listdata = [...this.listdata, ...res.data.data]
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.sbaba {
		font-size: 15px;
		font-weight: normal;
		color: #F4F3E3;
		line-height: 15px;
		text-align: right;
		margin-right: 23px;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/liandan/mbg.png) no-repeat;
		background-size: 100% auto;
		padding: 10px 6px 0;
	}

	.scrollbox {
		height: calc(100vh - 151px);
		overflow-y: scroll;
	}

	.skk {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-16.png) no-repeat;
		background-size: 100% 100%;
		padding: 12px 24px 11px;
		margin-bottom: 7px;

		.skk1 {
			font-size: 14px;
			font-weight: normal;
			color: #CCCCCC;
			line-height: 14px;
		}
	}

	.ping1 {
		width: 100%;
		display: flex;
	}


	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 2px;
		padding: 13px 23px 11px 16px;
	}

	.word {
		width: 72px;
		text-align: center;
	}

	.remark {
		font-size: 12px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 16px;
	}

	.ibxoa {
		display: flex;
		align-items: center;

		.yimg {
			width: 46px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-17.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 7px 6px;
		}

		text {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			margin-left: 6px;
		}
	}

	.dannum {
		font-size: 16px;
		font-weight: normal;
		color: #333333;
		line-height: 16px;
	}
</style>